<template>
  <view>
    <view class="canvas-box">
      <canvas canvas-id="shareFriend" width="1080" height="1280" style="width:375px;height:667px;" />
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCompanyHookById, getMpQrCodeById, userWithCompany } from '@/common/api/user'
import { downloadFile } from '@/common/util'
export default {
  name: 'MinePoster',
  data() {
    return {
      adjustmentList: [],
      huoKeInfo: {},
      huoKeQrCode: '',
      phone: '',
      name: ''
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  created() {
    this.getHuoKe()
  },
  methods: {
    // 获取获客介绍详情
    async getHuoKe() {
      const [err, res] = await getCompanyHookById({ autoCompanyId: this.userInfo.companyId })
      if (!this.$http.errorCheck(err, res)) return false
      let data = res.data.data
      if (!data) {
        data = {
          autoCompanyName: '',
          introduction: '',
          contactsUserId: ''
        }
      }
      this.huoKeInfo = data
      await this.getAdjustment()
    },
    // 获取子账号
    async getAdjustment() {
      const [err, res] = await userWithCompany(this.userInfo.companyId, { companyUserId: this.userInfo.companyId })
      if (!this.$http.errorCheck(err, res)) return false
      this.adjustmentList = res.data.data
      await this.getCode()
    },
    // 获取车企专属获客宝二维码
    async getCode() {
      const [err, res] = await getMpQrCodeById()
      if (!this.$http.errorCheck(err, res)) return false
      if (this.adjustmentList.length && this.huoKeInfo) {
        for (let i = 0; i < this.adjustmentList.length; i++) {
          if (this.adjustmentList[i].userId === this.huoKeInfo.contactsUserId) {
            this.phone = this.adjustmentList[i].phone
            this.name = this.adjustmentList[i].nickname
            break
          }
        }
      }
      this.huoKeQrCode = await downloadFile(res.data.data)
      this.generatePicture(this.huoKeQrCode)
    },
    // 生成获客海报
    generatePicture(qrCode) {
      const bgdSrc = '/static/pic.jpg'
      const ctx = uni.createCanvasContext('shareFriend', this)
      ctx.drawImage(bgdSrc, 0, 0, 375, 667) // 画背景图
      ctx.setFillStyle('rgba(255,255,255,.9)')
      ctx.drawImage(qrCode, 208, 500, 112, 112)
      ctx.setFontSize(16)
      ctx.setFillStyle('#FFFFFF')
      if (this.name) {
        ctx.fillText('姓名：' + this.name, 26, 660)
      }
      if (this.phone) {
        ctx.fillText('手机号：' + this.phone, 194, 660)
      }
      ctx.setFontSize(20)
      ctx.setFillStyle('#133B70')
      ctx.setTextAlign('center')
      ctx.fillText(this.huoKeInfo.autoCompanyName, 180, 50)
      ctx.draw(false, () => {
        this.$nextTick(() => {
          uni.canvasToTempFilePath({
            canvasId: 'shareFriend',
            success: (res) => {
              this.$emit('mounted', {
                filePath: res.tempFilePath,
                huoKeQrCode: this.huoKeQrCode,
                autoCompanyName: this.huoKeInfo.autoCompanyName
              })
            }
          }, this)
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.canvas-box{
  width:375px;
  height:667px;
  overflow:hidden;
  position: absolute;
  top:-10000px;
}
</style>
